<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span
          style="width: 100px;text-align:centerdisplay: inline-block;line-height: 40px;height: 25px;"
        >企业名称:</span>
        <el-input v-model="input" placeholder="情输入企业名称" />
        <el-button>查询</el-button>
      </div>
      <el-button @click="$router.push('/park/addpark')">添加企业</el-button>
    </el-card>
    <el-table :data="tableData" style="width: 100%" @expand-change="getEnterpriseRent">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="list">
            <el-table-column prop="buildingName" label="租赁楼宇" width="180" />
            <el-table-column prop="endTime" label="租赁起止时间" width="180" />
            <el-table-column prop="status" label="合同状态" width="180" />
            <el-table-column label="操作">
              <el-button size="mini" type="text">续租</el-button>
              <el-button size="mini" type="text">退组</el-button>
              <el-button size="mini" type="text" @click="cc(props.row)">删除</el-button>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="序号" prop="id" />
      <el-table-column label="企业名称" prop="contact" />
      <el-table-column label="联系人" prop="name" />
      <el-table-column label="联系电话" prop="contactNumber" />
      <el-table-column label="操作">
        <template slot-scope="props">
          <el-button size="mini" type="text">添加合同</el-button>
          <el-button size="mini" type="text" @click="handleClick(props.row)">查看</el-button>
          <el-button size="mini" type="text">编辑</el-button>
          <el-button size="mini" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getEnTerPrise, getEnterpriseRent, getInduStry } from '@/api/enterprise'
export default {
  data() {
    return {
      input: '',
      params: {
        name: '',
        page: 1,
        pageSize: 10
      },
      tableData: [],
      list: []
    }
  },
  created() {
    this.getEnTerPrise()
    this.getInduStry()
    this.getEnterpriseRent()
  },
  methods: {
    cc() {

    },
    async getEnTerPrise() {
      const { rows } = await getEnTerPrise()
      this.tableData = rows
    },
    // 查询企业所属行业列表
    async getInduStry() {
      await getInduStry()
    },
    async handleClick(row) {
      const res = await getEnterpriseRent(row.id)
      console.log(res)
    },
    async getEnterpriseRent({ id }) {
      const res = await getEnterpriseRent(id)
      this.list = res
    }
  }
}
</script>
<style>
.el-card__body {
  padding: 0;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.clearfix {
  display: flex;
}
</style>
